<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Personal blog</title>
		<meta content="width=device-width, initial-scale=1.0" name="viewport">
		<meta content="" name="keywords">
		<meta content="" name="description">

		<!-- Facebook Opengraph integration: https://developers.facebook.com/docs/sharing/opengraph -->
		<meta property="og:title" content="">
		<meta property="og:image" content="">
		<meta property="og:url" content="">
		<meta property="og:site_name" content="">
		<meta property="og:description" content="">

		<!-- Twitter Cards integration: https://dev.twitter.com/cards/  -->
		<meta name="twitter:card" content="summary">
		<meta name="twitter:site" content="">
		<meta name="twitter:title" content="">
		<meta name="twitter:description" content="">
		<meta name="twitter:image" content="">

		<!-- Favicon -->
		<link href="img/favicon.ico" rel="icon">

		<!-- Google Fonts -->
		<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700|Roboto:400,900" rel="stylesheet">

		<!-- Bootstrap CSS File -->
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

		<!-- Libraries CSS Files -->
		<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">

		<!-- Main Stylesheet File -->
		<link href="css/style.css" rel="stylesheet">


	</head>

	<body>
		<!-- Page Content
    ================================================== -->
		<!-- Hero -->

		<section class="hero" id="hero">
			<div class="container text-center">
				<div class="row">
					<div class="col-md-12">
						<a class="hero-brand" href="index.html" title="海贼王"><img alt="Bell Logo" src="img/logo-h.png"></a>
					</div>
				</div>

				<div class="col-md-12">
					<h1>
						一个充满热血的动画
					</h1>

					<p class="tagline">
						这是一个讲述海贼路飞要成为海贼王的故事,为了自己的目标,结实了好多同伴。
					</p>
					<a class="btn btn-full" href="#about">现在开始</a>
				</div>
			</div>

		</section>
		<!-- /Hero -->

		<!-- Header -->
		<header id="header">
			<div class="container">

				<div id="logo" class="pull-left">
					<a href="index.html"><img src="img/logo-h.png" alt="" title="" /></img></a>
					<!-- Uncomment below if you prefer to use a text image -->
					<!-- <h1><a href="#hero">Blog</a></h1> -->
				</div>

				<nav id="nav-menu-container">
					<ul class="nav-menu">
						<li><a href="#about">关于我们</a></li>
						<li><a href="#features">特征</a></li>
						<li><a href="#portfolio">投资组合</a></li>
						<li><a href="#team">认识我们</a></li>
						<!-- <li class="menu-has-children"><a href="">Drop Down</a>
            <ul>
              <li><a href="#">Drop Down 1</a></li>
              <li class="menu-has-children"><a href="#">Drop Down 2</a>
                <ul>
                  <li><a href="#">Deep Drop Down 1</a></li>
                  <li><a href="#">Deep Drop Down 2</a></li>
                  <li><a href="#">Deep Drop Down 3</a></li>
                  <li><a href="#">Deep Drop Down 4</a></li>
                  <li><a href="#">Deep Drop Down 5</a></li>
                </ul>
              </li>
              <li><a href="#">Drop Down 3</a></li>
              <li><a href="#">Drop Down 4</a></li>
              <li><a href="#">Drop Down 5</a></li>
            </ul>
          </li> -->
						<li><a href="#contact">联系我们</a></li>
					</ul>
				</nav>
				<!-- #nav-menu-container -->

				<!-- <nav class="nav social-nav pull-right d-none d-lg-inline">
        <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-envelope"></i></a>
      </nav> -->
			</div>
		</header>
		<!-- #header -->

		<!-- About -->

		<section class="about" id="about">
			<div class="container text-center">
				<h2>
					关于海贼王的话题
				</h2>

				<p>
					海贼王是日本漫画家尾田荣一郎创作的一部少年漫画，目前改编为动漫持续更新。漫画的简介是拥有财富、名声、权力，这世界上的一切的男人。海贼王 哥尔D罗杰被行刑受死之前说的一句话，让全世界人都疯狂的涌入大海。“想要得到我的宝藏吗？那就去找吧!我全部放在了哪里”世界开始了大航海时代。
				</p>

				<div class="row stats-row">
					<div class="stats-col text-center col-md-3 col-sm-6">
						<div class="circle">
							<span class="stats-no" data-toggle="counter-up">232</span> 满意的客户
						</div>
					</div>

					<div class="stats-col text-center col-md-3 col-sm-6">
						<div class="circle">
							<span class="stats-no" data-toggle="counter-up">79</span> 发布项目
						</div>
					</div>

					<div class="stats-col text-center col-md-3 col-sm-6">
						<div class="circle">
							<span class="stats-no" data-toggle="counter-up">1,463</span> 营业时间
						</div>
					</div>

					<div class="stats-col text-center col-md-3 col-sm-6">
						<div class="circle">
							<span class="stats-no" data-toggle="counter-up">15</span> 努力工作的人
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- /About -->
		
		<!-- Parallax -->

		<div class="block bg-primary block-pd-lg block-bg-overlay text-center" data-bg-img="img/parallax-bg.jpg"
		 data-settings='{"stellar-background-ratio": 0.6}' data-toggle="parallax-bg">
			<h2>
				欢迎来到一个完美的动画世界
			</h2>

			<p>
				这是最好看的动画，有数千种您从未见过的选项。
			</p>
			<img alt="Bell - A perfect theme" class="gadgets-img hidden-md-down" src="img/h-b.png">
		</div>
		<!-- /Parallax -->
		<!-- Features -->

		<section class="features" id="features">
			<div class="container">
				<h2 class="text-center">
					我修改了呀
				</h2>

				<div class="row">
					<div class="feature-col col-lg-4 col-xs-12">
						<div class="card card-block text-center">
							<div>
								<div class="feature-icon">
									<span class="fa fa-rocket"></span>
								</div>
							</div>

							<div>
								<h3>
									哈哈哈哈哈哈哈哈11111111111
								</h3>

								<p>
									hahahahahah
								</p>
							</div>
						</div>
					</div>

					<div class="feature-col col-lg-4 col-xs-12">
						<div class="card card-block text-center">
							<div>
								<div class="feature-icon">
									<span class="fa fa-envelope"></span>
								</div>
							</div>

							<div>
								<h3>
									Responsive Layout
								</h3>

								<p>
									Eque feugiat contentiones ei has. Id summo mundi explicari his, nec in maiorum scriptorem.
								</p>
							</div>
						</div>
					</div>

					<div class="feature-col col-lg-4 col-xs-12">
						<div class="card card-block text-center">
							<div>
								<div class="feature-icon">
									<span class="fa fa-bell"></span>
								</div>
							</div>

							<div>
								<h3>
									Innovative Ideas
								</h3>

								<p>
									Eque feugiat contentiones ei has. Id summo mundi explicari his, nec in maiorum scriptorem.
								</p>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="feature-col col-lg-4 col-xs-12">
						<div class="card card-block text-center">
							<div>
								<div class="feature-icon">
									<span class="fa fa-database"></span>
								</div>
							</div>

							<div>
								<h3>
									Good Documentation
								</h3>

								<p>
									Eque feugiat contentiones ei has. Id summo mundi explicari his, nec in maiorum scriptorem.
								</p>
							</div>
						</div>
					</div>

					<div class="feature-col col-lg-4 col-xs-12">
						<div class="card card-block text-center">
							<div>
								<div class="feature-icon">
									<span class="fa fa-cutlery"></span>
								</div>
							</div>

							<div>
								<h3>
									Excellent Features
								</h3>

								<p>
									Eque feugiat contentiones ei has. Id summo mundi explicari his, nec in maiorum scriptorem.
								</p>
							</div>
						</div>
					</div>

					<div class="feature-col col-lg-4 col-xs-12">
						<div class="card card-block text-center">
							<div>
								<div class="feature-icon">
									<span class="fa fa-dashboard"></span>
								</div>
							</div>

							<div>
								<h3>
									Retina Ready
								</h3>

								<p>
									Eque feugiat contentiones ei has. Id summo mundi explicari his, nec in maiorum scriptorem.
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- /Features -->
		<!-- Portfolio -->

		<section class="portfolio" id="portfolio">
			<div class="container text-center">
				<h2>
					Portfolio
				</h2>

				<p>
					Voluptua scripserit per ad, laudem viderer sit ex. Ex alia corrumpit voluptatibus usu, sed unum convenire id. Ut
					cum nisl moderatius, Per nihil dicant commodo an.
				</p>
			</div>

			<div class="portfolio-grid">
				<div class="row">
					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-1.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-2.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-3.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-4.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-5.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-6.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-7.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>

					<div class="col-lg-3 col-sm-6 col-xs-12">
						<div class="card card-block">
							<a href="#"><img alt="" src="img/porf-8.jpg">
								<div class="portfolio-over">
									<div>
										<h3 class="card-title">
											The Dude Rockin'
										</h3>

										<p class="card-text">
											Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
										</p>
									</div>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- /Portfolio -->
		<!-- Team -->

		<section class="team" id="team">
			<div class="container">
				<h2 class="text-center">
					认识我们的团队
				</h2>

				<div class="row">
					<div class="col-sm-3 col-xs-6">
						<div class="card card-block">
							<a href="#"><img alt="" class="team-img" src="img/h-5.jpg">
								<div class="card-title-wrap">
									<span class="card-title">海贼王</span> <span class="card-text">路飞</span>
								</div>

								<div class="team-over">
									<h4 class="hidden-md-down">
										联系我
									</h4>

									<nav class="social-nav">
										 <span >
										 	  <a href="tel:13641211932">拨号:13641211932</a>  
										 </span>
									</nav>

									<p>
										Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
									</p>
								</div>
							</a>
						</div>
					</div>

					<div class="col-sm-3 col-xs-6">
						<div class="card card-block">
							<a href="#"><img alt="" class="team-img" src="img/h-4.jpeg">
								<div class="card-title-wrap">
									<span class="card-title">海贼王</span> <span class="card-text">女帝</span>
								</div>

								<div class="team-over">
									<h4 class="hidden-md-down">
										Connect with me
									</h4>

									<nav class="social-nav">
										 <span >
											  <a href="tel:13641211932">拨号:13641211932</a>  
										</span>
									</nav>

									<p>
										Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
									</p>
								</div>
							</a>
						</div>
					</div>

					<div class="col-sm-3 col-xs-6">
						<div class="card card-block">
							<a href="#"><img alt="" class="team-img" src="img/h-3.png">
								<div class="card-title-wrap">
									<span class="card-title">海贼王</span> <span class="card-text">路飞</span>
								</div>

								<div class="team-over">
									<h4 class="hidden-md-down">
										Connect with me
									</h4>

									<nav class="social-nav">
										 <span >
											  <a href="tel:13641211932">拨号:13641211932</a>  
										</span>
									</nav>

									<p>
										Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
									</p>
								</div>
							</a>
						</div>
					</div>

					<div class="col-sm-3 col-xs-6">
						<div class="card card-block">
							<a href="#"><img alt="" class="team-img" src="img/h-2.jpg">
								<div class="card-title-wrap">
									<span class="card-title">海贼王</span> <span class="card-text">艾斯</span>
								</div>

								<div class="team-over">
									<h4 class="hidden-md-down">
										Connect with me
									</h4>

									<nav class="social-nav">
										 <span >
											  <a href="tel:13641211932">拨号:13641211932</a>  
										</span>
									</nav>

									<p>
										Lorem ipsum dolor sit amet, eu sed suas eruditi honestatis.
									</p>
								</div>
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- /Team -->
		<!-- @component: footer -->

		<section id="contact">
			<div class="container">
				<div class="row">
					<div class="col-md-12 text-center">
						<h2 class="section-title">联系我们</h2>
					</div>
				</div>

				<div class="row justify-content-center">
					<div class="col-lg-3 col-md-4">
						<div class="info">
							<div>
								<i class="fa fa-map-marker"></i>
								<p>北京市<br>前门大街8号</p>
							</div>

							<div>
								<i class="fa fa-envelope"></i>
								<p>info@example.com</p>
							</div>

							<div>
								<i class="fa fa-phone"></i>
								<p>1 3641 2119 32</p>
							</div>

						</div>
					</div>

					<div class="col-lg-5 col-md-8">
						<div class="form">
							<div id="sendmessage">您的消息发送成功,谢谢!</div>
							<div id="errormessage"></div>
							<form action="" method="post" role="form" class="contactForm">
								<div class="form-group">
									<input type="text" name="name" class="form-control" id="name" placeholder="您的名字" data-rule="minlen:4"
									 data-msg="请输入至少4个字符" />
									<div class="validation"></div>
								</div>
								<div class="form-group">
									<input type="email" class="form-control" name="email" id="email" placeholder="您的邮箱" data-rule="email"
									 data-msg="请输入有效电子邮件" />
									<div class="validation"></div>
								</div>
								<div class="form-group">
									<input type="text" class="form-control" name="subject" id="subject" placeholder="主题" data-rule="minlen:4"
									 data-msg="请输入至少8个主题字符" />
									<div class="validation"></div>
								</div>
								<div class="form-group">
									<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="请为我们写点东西"
									 placeholder="信息"></textarea>
									<div class="validation"></div>
								</div>
								<div class="text-center"><button type="submit">发送信息</button></div>
							</form>
						</div>
					</div>

				</div>
			</div>
		</section>

		<footer class="site-footer">
			<div class="bottom">
				<div class="container">
					<div class="row">

						<div class="col-lg-6 col-xs-12 text-lg-left text-center">
							<p class="copyright-text">
								© BELL Theme
							</p>
							
						</div>

						<div class="col-lg-6 col-xs-12 text-lg-right text-center">
							<ul class="list-inline">
								<li class="list-inline-item">
									<a href="index.html">Home</a>
								</li>

								<li class="list-inline-item">
									<a href="#about">About Us</a>
								</li>

								<li class="list-inline-item">
									<a href="#features">Features</a>
								</li>

								<li class="list-inline-item">
									<a href="#portfolio">Portfolio</a>
								</li>

								<li class="list-inline-item">
									<a href="#team">Team</a>
								</li>

								<li class="list-inline-item">
									<a href="#contact">Contact</a>
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
		</footer>
		<a class="scrolltop" href="#"><span class="fa fa-angle-up"></span></a>


		<!-- Required JavaScript Libraries -->
		<script src="lib/jquery/jquery.min.js"></script>
		<script src="lib/jquery/jquery-migrate.min.js"></script>
		<script src="lib/superfish/hoverIntent.js"></script>
		<script src="lib/superfish/superfish.min.js"></script>
		<script src="lib/tether/js/tether.min.js"></script>
		<script src="lib/stellar/stellar.min.js"></script>
		<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
		<script src="lib/counterup/counterup.min.js"></script>
		<script src="lib/waypoints/waypoints.min.js"></script>
		<script src="lib/easing/easing.js"></script>
		<script src="lib/stickyjs/sticky.js"></script>
		<script src="lib/parallax/parallax.js"></script>
		<script src="lib/lockfixed/lockfixed.min.js"></script>

		<!-- Template Specisifc Custom Javascript File -->
		<script src="js/custom.js"></script>

		<script src="contactform/contactform.js"></script>

	</body>
</html>
